import {AfterViewInit, Component, OnInit} from '@angular/core';
import {CommonService} from '../common.service';
import {ActivatedRoute} from '@angular/router';
import {$t} from 'codelyzer/angular/styles/chars';
import {setSourcesToLazy} from 'ng-lazyload-image/src/util';

@Component({
    selector: 'app-detail',
    templateUrl: './detail.component.html',
    styleUrls: ['./detail.component.css']
})
export class DetailComponent implements OnInit, AfterViewInit {
    info = {
        actors: null,
        cat_id: 4,
        channel: 'girls',
        comments: 0,
        content: null,
        create_time: 1558024412,
        description: '',
        flag: 0,
        from: 0,
        goods: 0,
        id: 0,
        images: [],
        keywords: '',
        likes: 0,
        plays: 0,
        score: 0,
        status: 0,
        tags: [],
        thumb: '',
        thumb_id: '',
        title: '',
        token: '',
        update_time: '',
        user_id: 0,
        video: '',
    };
    id;

    constructor(public Service: CommonService, private route: ActivatedRoute) {
    }

    ngOnInit() {
        this.route.params.subscribe(res => {
            this.id = res.id;
        });

        const $this = this;
        this.Service.post('index/getInfo', {id: this.id}).subscribe(res => {
            this.Service.resultHandler(res, function (msg, data) {
                data.tags = data.tags.split(',');
                $this.info = data;
                $this.setScore();
            });
        });

    }


    /**
     * 评分
     */
    setScore() {
        const $this = this;
        $('#rating-input').val(this.info.score);
        $('#rating-input').rating({
            min: 0,
            max: 10,
            step: 0.5,
            size: 'sm',
            showClear: false
        });

        $('#rating-input').on('rating.change', function () {
            let score = $('#rating-input').val();
            const user = $this.Service.getUserInfo();
            const params = {vid: $this.id, uid: user.id, score: score};

            if (!user) {
                return layer.msg('您还未登录~');
            }
            let index = layer.load();
            $this.Service.post('index/setscore', params).subscribe(res => {
                $this.Service.resultHandler(res, function (msg, data) {
                    layer.close(index);
                    layer.msg(msg);
                });
            });
        });
    }

    /**
     * 点赞
     * @param id
     * @param key
     */
    liked(id) {
        const $this = this;
        const user = this.Service.getUserInfo();
        if (!user) {
            return layer.msg('您还未登录，请登录后再来~');
        }
        let params = {
            'id': id,
            'uid': user.id,
            'channel': this.info.channel
        };

        let index = layer.load();
        this.Service.post('index/liked', params).subscribe(res => {
            this.Service.resultHandler(res, function (msg, data) {
                layer.close(index);
                if (res['status']) {
                    const info = $this.info;
                    info.goods += 1;
                    $this.info = info;
                    layer.msg('点赞成功');
                } else {
                    layer.msg(msg);
                }
            });
        });
    }

    collect(id) {
        const $this = this;
        const user = this.Service.getUserInfo();
        if (!user) {
            return layer.msg('您还未登录，请登录后再来~');
        }
        let params = {
            'vid': id,
            'uid': user.id,
            'channel': this.info.channel,
            'title': this.info.title,
            'thumb': this.info.thumb_id
        };
        let index = layer.load();
        this.Service.post('index/collect', params).subscribe(res => {
            this.Service.resultHandler(res, function (msg, data) {
                layer.close(index);
                if (res['status']) {
                    const info = $this.info;
                    info.goods += 1;
                    $this.info = info;
                    layer.msg('收藏成功');
                } else {
                    layer.msg(msg);
                }
            });
        });
    }

    ngAfterViewInit(): void {
        /**
         * 图片查看
         */
        $('.image-list').on('click', '.cover', function () {
            const this_ = $(this);
            const images = this_.parents('.image-list').find('.cover');
            const imagesArr = new Array();
            $.each(images, function (i, image) {
                imagesArr.push($(image).children('a').attr('big-src'));
            });
            $.pictureViewer({
                images: imagesArr, // 需要查看的图片，数据类型为数组
                initImageIndex: this_.index() + 1, // 初始查看第几张图片，默认1
                scrollSwitch: true // 是否使用鼠标滚轮切换图片，默认false
            });
        });
    }
}
